<template>
  <div class="export-to-excel">
    <el-button type="primary" @click="onDownload"> 导 出 </el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
/* 
# use yarn
yarn add file-saver xlsx
yarn add file-saver script-loader --dev
*/
import { export2Excel } from "@/utils/tool";

const data = [
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1516 弄",
  },
];
export default {
  name: "Export2Excel",
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    onDownload() {
      const exportData = data;
      const filename = "数据报表";
      const header = ["日期", "姓名", "地址"];
      const headValue = ["date", "name", "address"];
      export2Excel(header, headValue, exportData, filename);
    },
  },
  mounted() {
    this.tableData = data;
  },
};
</script>

<style scoped lang="scss">
</style>
